@charset "utf-8";
@import "common/reset";
@function p($px){
    @return $px/2+px;
    
}

header{
    width: 100%;
    height: p(88);
    background: #0f0f0f;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .last{
        width: p(103);
        height: p(43);
        display: flex;
        .last-img{
            width: p(23);
            height: p(43);
            overflow: hidden;
            img{
                width: 100%;
            }
        }
        p{
            font-size: p(28);
            line-height: p(28);
            color: #fff;
            margin-top: p(5);
            margin-left: p(16);
        }
    }
    h1{
        font-size: p(36);
        color: #fff;
    }
    .dian{
        width: p(6);
        height: p(34);
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}
section{
    //购物车详情
    .desc{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background: #FFF;
        height: p(183);
        input[type="checkbox"]{
            display: none;
        }
        //未选择时的情况
        .check{
            width: p(46);
            height: p(46);
            border-radius: 50%;
            border: 1px solid #f85c5c;
           
        }
        //选择后的情况
        .check::after{
            content: "";
            display: inline-block;
            width: p(46);
            height: p(46);
            border-radius: 50%;
            background:#f85c5c url(../img/GWC/checked.png);
            background-size: 102%;
            display: none;
         
            
        }
        //选中控制按钮
        input[type="checkbox"]:checked + label .check::after{
            display: block;
        }
        .JZ{
            .img{
                width: p(116);
                height: p(116);
            }
            img{
                width: 100%;
            }
        }
//      数字
        .muban{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-start;
            height: 100%;
            p:nth-child(1){
                font-size:p(24) ;
                color: #5c5c5c;
                align-self: flex-start;
                margin-left: -6px;
            }
            p:nth-child(2){
                font-size:p(24) ;
                color: #eb7575;
            }
            .number{
                display: flex;
                flex-direction: row;
                width: p(139);
                height: p(40);
                border: 1px solid #6b6b6b;
                input[type="button"]{
                    width: p(38);
                    border: 1px solid #6b6b6b;
                }
                input[type="text"]{
                    width: p(59);
                    border: 1px solid #6b6b6b;
                    font-size: p(24);
                    text-align: center;
                    line-height: p(40);
                    
                    
                }
            }
        }
        //移除
        .delete{
            .fuhao{
                width:p(46) ;
                height: p(46) ;
                overflow:hidden;
                img{
                    width: 100%;
                }
            }
            p{
                font-size: p(20);
                color: #eb7575;
            }
        }
        
    }    
}
footer{
    width: 100%;
    height: p(90);
    background: #fff;
    position: absolute;
    bottom: 0;
   .quanxuan{
    display: flex;
    align-items: center;
    justify-content: space-around;
        input[type="checkbox"]{
            display: none;
            
        }
        //未选择时的情况
        .check{
            width: p(46);
            height: p(46);
            border-radius: 50%;
            border: 1px solid #f85c5c;
         
           
        }
        //选择后的情况
        .check::after{
            content: "";
            display: inline-block;
            width: p(46);
            height: p(46);
            border-radius: 50%;
            background:#f85c5c url(../img/GWC/checked.png);
            background-size: 102%;
            display: none;
         
            
        }
        //选中控制按钮
        input[type="checkbox"]:checked + label .check::after{
            display: block;
        }
        //价格计算
        .zongjia{
            display: flex;
            flex-direction: column;
        }
        //结算
        a{
            width: p(163);
            height: p(73);
            background: #f85c5c;
            font-size: p(26);
            line-height: p(73);
            text-align: center;
            color:#fff ;
            border-radius: p(7);
        }
        //总价
        .zongjia{
            p:nth-child(1){
                font-size: p(22);
                color: #6b6b6b;
                .jiage{
                font-size:p(30);
                color:#f85c5c ;
                }
            }
            //价格第二段
            p:nth-child(2){
                font-size: p(20);
                color: #6b6b6b;
                margin-left: -5px;
            }
        }
        
   }
}
